<template>
	<view class="home-container">
		<view class="search-box">
			<my-search @click="toSearch" :homeFlag="homeFlag"></my-search>
		</view>
		<view>
			<!-- 轮播图区域 -->
			<swiper :indicator-dots="true" indicator-active-color="#E69038" indicator-color='#fff' :autoplay="true"
				:interval="3000" :duration="1000" circular="true">
				<swiper-item v-for="(item,index) in swiperList" :key="index" @click="toGoodsDetail(item.productId)">
					<view class="swiper-item">
						<image :src="item.imgUrl" mode="aspectFill"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<!-- 分类导航区域 -->
		<view class="nav-list">
			<view class="nav-item" v-for="(item,index) in cateListLevelFirst" :key="index" @click="toCate(item,index)">
				<image :src="item.imgUrl" class="nav-item-pic"></image>
				{{item.name}}
			</view>
			<!-- <view class="nav-item">
			</view> -->
			<!-- 	<view class="to-more">
				<view class="icon-more">...</view>
				查看更多
			</view> -->
		</view>

		<!-- 限时活动区域 -->
		<view>
			<view class="activity-title">
				限时活动
			</view>
			<view class="xuanchuanyu">
				好物惊喜享不停
			</view>

			<!-- 红包活动 -->
			<view class="hbhl" @click="tohbhd">
				<image class="hbhl-pic" :src="bannerTop" mode=""></image>
			</view>
			<!-- 酒文化 -->
			<view class="activities">
				<view class="wine-culture" @click="toCulture">
					<image class="pic" :src="bannerLeft" mode=""></image>
					<!-- <image class="pic" src="/static/icons/home_activity_two@3x.png" mode=""></image> -->
				</view>
				<!-- 答题闯关 -->
				<view class="breakthrougn" @click="toBreakLevel">
					<image class="pic" :src="bannerRight" mode=""></image>
<!-- 					<image class="pic" src="/static/icons/home_activity_three@3x.png" mode=""></image> -->
				</view>
			</view>
		</view>

		<!-- 楼层区域 -->
		<view>
			<view class="activity-title">
				传承经典
			</view>
			<view class="xuanchuanyu">
				好物惊喜享不停
			</view>

			<view class="floor-area">
				<view class="floor-item" v-for="(item,index) in floorList" :key="index">
					<view class="item-img" @click="toGoodsDetail(item._id)">
						<image :src="item.imgUrl" class="item-pic"></image>
					</view>
					<view class="item-name" @click="toGoodsDetail(item._id)">
						{{item.name}}
					</view>
					<view class="item-price">
						￥{{item.price}}
					</view>
					<view class="buy" @click="toBuy(item)">
						立即购买
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				swiperList: [], // 轮播图数据列表
				cateListLevelFirst: [], // 一级分类数据数组
				floorList: [], // 楼层区域数据
				offset: 1,
				limit: 10,
				reachFlag: false, // 数据加载完成，没有更多数据
				homeFlag: true,
				bannerTop: '',
				bannerLeft: '',
				bannerRight: ''
			};
		},
		onLoad() {
			
			
			uni.setStorage({
				key: 'page',
				data: ''
			});
			

			// uni.setStorage({
			// 	key: 'launchFlag',
			// 	data: false
			// });
		},
		
		globalData: {
			show: true
		},
		async onReachBottom() {
			var that = this

			that.offset++
			const {
				data: res
			} = await uni.$http.post('/product/getRecProductList', {
				offset: that.offset,
				limit: that.limit
			})
			if (res.data.list.length) {
				that.floorList.push(...res.data.list)
			} else {
				uni.$showMsg('暂无更多商品!')
			}



		},
		onShow() {
			this.offset=1
			this.getRecProductList()
			this.getSwiperList()
			this.getCateListLevelFirst()
			this.getRecProductList()
			this.getBannerPicTop()
			this.getBannerPicLeft()
			this.getBannerPicRight()
		},
		methods: {
			// 获取活动广告长图
			async getBannerPicTop() {
				const {
					data: res
				} = await uni.$http.post('/dictionary/getConfig', {
					code: 'HOME_AD_CHANG'
				})
				// console.log(res.data)
				this.bannerTop = res.data
			},
			async getBannerPicLeft() {
				const {
					data: res
				} = await uni.$http.post('/dictionary/getConfig', {
					code: 'HOME_AD_LEFT'
				})
				// console.log(res.data)
				this.bannerLeft = res.data
			},
			async getBannerPicRight() {
				const {
					data: res
				} = await uni.$http.post('/dictionary/getConfig', {
					code: 'HOME_AD_RIGHT'
				})
				// console.log(res.data)
				this.bannerRight = res.data
			},

			// 获取楼层区域商品
			async getRecProductList() {
				const {
					data: res
				} = await uni.$http.post('/product/getRecProductList', {
					offset: this.offset,
					limit: this.limit
				})
				console.log(res)
				this.floorList = res.data.list
			},

			// 获取分类导航区域数据
			// 获取一级分类数据
			async getCateListLevelFirst() {
				const {
					data: res
				} = await uni.$http.post('/product/getFirstType')
				// console.log(res)
				this.cateListLevelFirst = res.data.reverse()
			},



			// 答题闯关
			toBreakLevel() {
				if (JSON.stringify(this.userInfo) == '{}') {
					// uni.switchTab({
					// 	url: '/pages/my/my'
					// })
					uni.navigateTo({
						url:'/subpkg/login/login'
					})
					uni.$showMsg('请先登录！')
					return
				}
				uni.navigateTo({
					url: '/subpkg/Qa/Qa'
				})
			},
			// 到红包活动列表页
			tohbhd() {
				console.log(this.userInfo)
				if (JSON.stringify(this.userInfo) == '{}') {
					uni.navigateTo({
						url:'/subpkg/login/login'
					})
					uni.$showMsg('请先登录！')
					return
				}
				uni.navigateTo({
					url: '/subpkg/hongbaohuodong-list/hongbaohuodong-list?id=' + this.userInfo._id
				})
			},

			// 搜索
			toSearch() {
				if (this.userInfo) {
					uni.navigateTo({
						url: "/subpkg/search/search"
					})
				} else {
					uni.navigateTo({
						url:'/subpkg/login/login'
					})
					uni.$showMsg('请先登录!')
				}
			},
			// 获取轮播图数据
			async getSwiperList() {
				const {
					data: res
				} = await uni.$http.post('/banner/getBannerList')
				// console.log(res)
				this.swiperList = res.data
			},

			toCate(item, index) {
				uni.switchTab({
					url: '/pages/cate/cate'
				})
				console.log(index, item._id)
				uni.setStorageSync('activeIdx', index)
				uni.setStorageSync('act', index)
				uni.setStorageSync('homeId', item._id)
			},
			//点击酒文化，跳转文学页面
			toCulture() {
				uni.switchTab({
					url: '/pages/culture/culture'
				})
			},


			// 去商品详情页
			toGoodsDetail(id) {
				uni.navigateTo({
					url: "/subpkg/goods-detail/goods-detail?id=" + id
				})
			},


			// 立即购买
			async toBuy(item) {
				console.log(item)
				// 先判断是否登录
				// 1.登录情况下  加入购物车，并导航到购物车页面 
				if (item.stock == 0) {
					uni.$showMsg('库存不足!')
				} else {

					if (JSON.stringify(this.userInfo) !== '{}') {
						console.log(1)
						const {
							data: res
						} = await uni.$http.post('/cart/addCart', {
							userId: this.userInfo._id,
							productId: item._id,
							num: '1'
						})
						if (res.success == '0') {
							// this.getGoodsDetail()
							this.cartNum++
							// uni.$showMsg('添加成功！')
							uni.switchTab({
								url: '/pages/cart/cart'
							})
							return
						}
						// 未登录情况：导航到登录页  登陆后在导航回去
					} else {
						console.log(2)
						uni.navigateTo({
							url:'/subpkg/login/login'
						})
						uni.$showMsg('请先登录!')
					}
				}
			}

		},
		computed: {
			...mapState('m_user', ['userInfo'])
		}
	}
</script>

<style lang="scss">
	// 搜索吸顶效果
	.search-box {
		position: fixed;
		left: 0;
		right: 0;
		top: 20rpx;
		z-index: 999;
	}

	swiper {
		height: 650rpx;
		width: 100%;

		swiper-item {
			image {
				height: 650rpx;
				width: 100%;
			}
		}
	}

	.nav-list {
		display: flex;
		flex-wrap: wrap;
		// justify-content: space-evenly;
		margin-top: 62rpx;
		height: 330rpx;
		overflow: hidden;
		position: relative;
		text-align: center;

		.to-more {
			position: absolute;
			background-color: #FFFFFF;
			z-index: 999;
			right: 60rpx;
			bottom: 10rpx;
			width: 98rpx;
			height: 150rpx;
			// line-height: 160rpx;
			// margin-right: 45rpx;
			// margin-left: 42rpx;
			// margin-bottom: 36rpx;
			text-align: center;
			font-size: 24rpx;
			font-weight: 400;
			color: #444444;

			.icon-more {
				width: 60rpx;
				height: 60rpx;
				line-height: 30rpx;
				text-align: center;
				border-radius: 10rpx;
				font-size: 50rpx;
				background-color: #eee;
				color: #fff;
				margin: auto;
				margin-top: 20rpx;
				margin-bottom: 27rpx;

			}
		}

		.nav-item {
			width: 98rpx;
			margin-right: 45rpx;
			margin-left: 42rpx;
			margin-bottom: 36rpx;
			text-align: center;
			font-size: 24rpx;
			font-weight: 400;
			color: #444444;


			.nav-item-pic {
				width: 98rpx;
				height: 98rpx;
				border-radius: 50%;
			}
		}
	}


	// 限时活动区域
	.activity-title {
		text-align: center;
		font-size: 34rpx;
		font-weight: 400;
		color: #444444;
		margin-top: 50rpx;
	}

	.xuanchuanyu {
		font-size: 24rpx;
		font-weight: 300;
		color: #999999;
		margin-top: 27rpx;
		margin-bottom: 45rpx;
		text-align: center;
	}

	.hbhl {
		width: 702rpx;
		height: 180rpx;
		border-radius: 12rpx;
		margin: auto;
		margin-bottom: 18rpx;

		.hbhl-pic {
			width: 702rpx;
			height: 180rpx;
			border-radius: 12rpx;
		}
	}

	.activities {
		display: flex;
		justify-content: space-evenly;

		.wine-culture,
		.breakthrougn {
			width: 342rpx;
			height: 180rpx;
			border-radius: 12rpx;

			.pic {
				width: 342rpx;
				height: 180rpx;
				border-radius: 12rpx;
			}
		}
	}

	// 楼层区域
	.floor-area {
		display: flex;
		flex-wrap: wrap;
		padding: 0 24rpx;
		margin-bottom: 100rpx;
		justify-content: space-between;

		.floor-item {
			// height: 502rpx;
			width: 342rpx;
			// border: 1px solid #eee;
			margin-bottom: 45rpx;
			text-align: center;

			.item-img {
				width: 342rpx;
				height: 342rpx;
				// margin-top: 45rpx;

				.item-pic {
					width: 100%;
					height: 100%;
				}
			}

			.item-name {
				font-size: 28rpx;
				height: 75rpx;
				width: 235rpx;
				margin: auto;
				overflow: hidden;
				text-overflow: ellipsis;
				font-weight: 500;
				color: #333333;
			}

			.item-price {
				font-size: 30rpx;
				font-weight: 400;
				color: #FF1111;
				margin-top: 19rpx;
			}

			.buy {
				width: 130rpx;
				height: 38rpx;
				background: #E60505;
				border-radius: 19rpx;
				font-size: 22rpx;
				font-weight: 400;
				color: #FFFFFF;
				margin: auto;
				margin-top: 19rpx;
			}
		}
	}
</style>
